<template>
    <div class="navMenu">
        <template v-for="navMenu in menuData">
            <!-- 最后一级菜单 叶子菜单 -->
            <el-menu-item v-if="navMenu.children.length==0"
                          :index="navMenu.url==null?'':navMenu.url">
                <i :class="navMenu.icon"></i>
                <span slot="title">{{navMenu.menuName}}</span>
            </el-menu-item>
            <!-- 此菜单下还有子菜单 -->
            <el-submenu v-if="navMenu.children.length!=0"
                        :index="navMenu.menuId+''">
                <template slot="title">
                    <i :class="navMenu.icon"></i>
                    <span> {{navMenu.menuName}}</span>
                </template>
                <!-- 递归 -->
                <NavMenu :menuData="navMenu.children"></NavMenu>
            </el-submenu>
        </template>

    </div>
</template>

<script>
    export default {
        name: 'NavMenu',
        //接受使用者传递的数据
        props: ['menuData'],
        data() {
            return {}
        },
        methods: {}
    }
</script>

<style>
</style>